<template>
  <div class="out">
    <zHeader pageTitle="房屋信息"></zHeader>
    
    <div class="pageOut">
      <zInfoShowBtn :ifExpand="expandList.ifHouseBasicExpand" infoShowTitle="房屋基本信息" @changeExpandHandler="changeExpandHandler('ifHouseBasicExpand')">
        <template #btnIcon>
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" width="34" height="34" style="" filter="none">
            <g>
            <rect width="48" height="48" fill="rgba(24,126,255,1)" fill-opacity="0.01" stroke="none"></rect><path d="M9 18V42H39V18L24 6L9 18Z" fill="none"></path><path d="M9 42V18L4 22L24 6L44 22L39 18V42H9Z" stroke="rgba(24,126,255,1)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path d="M19 29V42H29V29H19Z" fill="none" stroke="rgba(24,126,255,1)" stroke-width="4" stroke-linejoin="round"></path><path d="M9 42H39" stroke="rgba(24,126,255,1)" stroke-width="4" stroke-linecap="round" fill="none"></path>
            </g>
          </svg>
        </template>

        <template #contentCard>
          <van-cell-group inset class="cellGroupCard" v-if="expandList.ifHouseBasicExpand">
            <zVanCell title="住宅地址" :content="houseInfo.zhuZhaiDiZhi" />
            <zVanCell title="房间号码" :content="houseInfo.fangJianNumber" />
            <zVanCell title="建筑面积" :content="houseInfo.jianZhuMianJi" />
            <zVanCell title="房型信息" :content="houseInfo.fangXingXinXi" />
          </van-cell-group>
        </template>
      </zInfoShowBtn>

      <zInfoShowBtn :ifExpand="expandList.ifMyApartmentTypeExpand" infoShowTitle="我的户型" @changeExpandHandler="changeExpandHandler('ifMyApartmentTypeExpand')">
        <template #btnIcon>
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" width="34" height="34" style="" filter="none">
            <g>
            <path d="M872.54912 128.36736l-100.68736 0c-13.24032 0-23.97312 10.73408-23.97312 23.9744 0 13.2416 10.73408 23.97568 23.97312 23.97568l76.71168 0 0 430.19008-250.7264 0c-13.24288 0-23.97568 10.73408-23.97568 23.9744s10.73408 23.9744 23.97568 23.9744l250.7264 0L848.57344 848.512 472.67072 848.512l0-67.78624c0-13.24032-10.73408-23.9744-23.9744-23.9744-13.2416 0-23.97568 10.73536-23.97568 23.9744L424.72064 848.512 176.37632 848.512 176.37632 536.00256l248.34432 0 0 94.48064c0 13.2416 10.73408 23.9744 23.97568 23.9744 13.2416 0 23.9744-10.73408 23.9744-23.9744l0-236.1344c0-13.2416-10.73408-23.97568-23.9744-23.97568-13.2416 0-23.97568 10.73408-23.97568 23.97568l0 93.70368L176.37632 488.05248 176.37632 176.31744l248.34432 0 0 67.78624c0 13.2416 10.73408 23.9744 23.97568 23.9744 13.2416 0 23.9744-10.73408 23.9744-23.9744l0-67.78624 129.26592 0c13.2416 0 23.9744-10.73408 23.9744-23.97568 0-13.24032-10.73408-23.9744-23.9744-23.9744l-449.536 0c-13.2416 0-23.97568 10.73408-23.97568 23.9744l0 720.1472c0 13.2416 10.73408 23.9744 23.97568 23.9744l720.1472 0c13.2416 0 23.9744-10.73408 23.9744-23.9744L896.52224 152.34176C896.52352 139.10144 885.78944 128.36736 872.54912 128.36736z" p-id="6399" fill="rgba(24,126,255,1)" stroke="none"></path>
            </g>
          </svg>
        </template>

        <template #contentCard>
          <van-cell-group inset class="cellGroupCard" v-if="expandList.ifMyApartmentTypeExpand">
            <div class="apartmentTypeImageOut">
              <img class="apartmentTypeImage" :src="houseInfo.huXingInfo.urls" @click="imagePreviewHandler(houseInfo.huXingInfo.urls)">
              <!-- <div class="directionArea">
                <div class="tipText">N</div>
                <svg class="directionIcon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" width="24" height="24" style="" filter="none">
                  <g>
                  <path d="M16 29v0c-7.18 0-13-5.82-13-13s5.82-13 13-13c7.18 0 13 5.82 13 13s-5.82 13-13 13zM16 28c6.627 0 12-5.373 12-12s-5.373-12-12-12c-6.627 0-12 5.373-12 12s5.373 12 12 12v0zM18.121 18.121c-1.768 1.768-9.192 4.95-9.192 4.95s3.182-7.425 4.95-9.192c1.768-1.768 9.192-4.95 9.192-4.95s-3.182 7.425-4.95 9.192v0zM14.62 14.6c-1.414 1.414-3.606 6.435-3.606 6.435s5.020-2.192 6.435-3.606l-2.828-2.828z" fill="rgba(16,16,16,1)"></path>
                  </g>
                </svg>
              </div> -->
            </div>
            
            <zVanCell title="户型" :content="houseInfo.huXing" />
            <zVanCell title="房屋朝向" :content="houseInfo.huXingInfo.fangWuChaoXiang" />
            <zVanCell title="建筑面积" :content="houseInfo.huXingInfo.jianZhuMianJi" />
            <zVanCell title="房型信息" :content="houseInfo.fangXingXinXi" />            
            <zVanCell title="城市" :content="houseInfo.xiaoQu.shiName" />
            <zVanCell title="建成年代" :content="houseInfo.huXingInfo.jianChengNianDai" />
            <zVanCell title="楼型" :content="houseInfo.huXingInfo.louXingName" />
          </van-cell-group>
        </template>
      </zInfoShowBtn>

      <zInfoShowBtn :ifExpand="expandList.ifBuildingStructureExpand" infoShowTitle="建筑结构概况" @changeExpandHandler="changeExpandHandler('ifBuildingStructureExpand')">
        <template #btnIcon>
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" width="34" height="34" style="" filter="none">
            <g>
            <path d="M789.376 627.2l8.512 12.8 46.912 85.376 8.576 12.8-8.512 12.8-46.976 85.312-8.512 12.8h-132.288l-8.512-12.8-46.976-85.376-4.224-12.8 8.512-12.8L652.8 640l8.576-12.8h128z m21.248-132.288c-8.512 0-12.8 4.288-17.024 12.8l-21.376 34.176h-98.112l-21.312-34.176c-4.288-8.512-12.8-12.8-17.088-12.8-4.224 0-8.512 0-12.8 4.288l-59.776 38.4c-8.512 4.224-12.8 17.024-8.512 29.824l21.312 34.176-46.912 85.312h-38.4c-12.8 0-21.376 8.576-21.376 21.376v68.224c0 12.8 8.576 21.376 21.376 21.376h38.4l46.912 85.312-21.312 34.176a22.464 22.464 0 0 0 8.512 29.824l59.776 38.4c4.224 0 8.512 4.288 12.8 4.288 8.512 0 12.8-4.288 17.088-12.8l21.312-34.176h98.176l21.312 34.176c4.224 8.512 12.8 12.8 17.024 12.8 4.288 0 8.576 0 12.8-4.288l59.776-38.4c8.512-4.224 12.8-17.024 8.512-29.824L870.4 883.2l46.976-85.312h38.4c12.8 0 21.312-8.512 21.312-21.376v-68.224c0-12.8-8.512-21.376-21.312-21.376h-38.4L870.4 601.6l21.376-34.176A22.528 22.528 0 0 0 883.2 537.6l-59.776-38.4c-4.224-4.224-8.512-4.224-12.8-4.224z m0 243.2l-42.624 76.8h-85.376l-42.624-76.8 42.624-72.512H768l42.624 72.512z m-384-183.488v-128h-128v128h128zM512 29.824L17.024 435.2l55.488 64L128 456.512v524.8h371.2c-25.6-25.6-51.2-51.2-68.288-85.312h-217.6V384L512 140.8l443.712 362.688 51.2-68.288L511.936 29.888H512z" fill="rgba(24,126,255,1)" p-id="12797" stroke="none"></path>
            </g>
          </svg>
        </template>

        <template #contentCard>
          <van-cell-group inset class="cellGroupCard" v-if="expandList.ifBuildingStructureExpand">
            <zVanCell title="结构类型" :content="houseInfo.jianZhuJieGou.jieGouName" />
            <zVanCell title="房间允许荷重" content="" />
            <zVanCell title="客厅" :content="houseInfo.jianZhuJieGou.keTingChengZhong" />
            <zVanCell title="卧室" :content="houseInfo.jianZhuJieGou.woShiChengZhong" />
            <zVanCell title="厨房" :content="houseInfo.jianZhuJieGou.chuFangChengZhong" />
            <zVanCell title="卫生间" :content="houseInfo.jianZhuJieGou.weiShengJianChengZhong" />
          </van-cell-group>
        </template>
      </zInfoShowBtn>

      <zInfoShowBtn :ifExpand="expandList.ifIndoorEquipmentInfoExpand" infoShowTitle="室内设备信息" @changeExpandHandler="changeExpandHandler('ifIndoorEquipmentInfoExpand')">
        <template #btnIcon>
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" width="34" height="34" style="" filter="none">
            <g>
            <rect x="9" y="4" width="30" height="40" rx="2" stroke="rgba(24,126,255,1)" stroke-width="4" fill="none"></rect><circle cx="24" cy="31" r="6" fill="none" stroke="rgba(24,126,255,1)" stroke-width="4"></circle><path d="M18 12H21" stroke="rgba(24,126,255,1)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path d="M18 18H21" stroke="rgba(24,126,255,1)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path d="M27 18H30" stroke="rgba(24,126,255,1)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>
            </g>
          </svg>
        </template>

        <template #contentCard>
          <div class="cellGroupCard tableOut" v-if="expandList.ifIndoorEquipmentInfoExpand">
            <vantTable
              class="table"
              :columns="indoorEquipmentInfoColumns"
              :data="houseInfo.shiNeiSheBeiGuanLianList"
              :height="300"
            ></vantTable>
          </div>
        </template>
      </zInfoShowBtn>

      <zInfoShowBtn :ifExpand="expandList.ifDecorationMatterExpand" infoShowTitle="装修事项" @changeExpandHandler="changeExpandHandler('ifDecorationMatterExpand')">
        <template #btnIcon>
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" width="34" height="34" style="" filter="none">
            <g>
            <path d="M3.808 20.768c0 0.512 0.224 0.768 0.768 0.768h2.368c0.096 0 0.224 0 0.32 0.032 0.48 0.256 0.736 1.056 0.512 1.568-1.088 2.496-0.512 4.704 1.024 6.88 1.536-2.144 2.080-4.352 1.056-6.816-0.064-0.192-0.128-0.448-0.096-0.672 0.032-0.608 0.48-0.992 1.088-0.992h2.24c0.384 0 0.704-0.224 0.704-0.544 0.032-0.512 0-0.992 0-1.472h-9.984v1.248zM12.864 14.88h-0.064c-0.032-0.512-0.064-1.056-0.096-1.6-0.288 0-0.544 0.032-0.8 0-0.256 0-0.32 0.096-0.352 0.32-0.064 0.416-0.192 0.832-0.256 1.248h-0.064c-0.064-0.512-0.096-1.024-0.16-1.536h-1.088c-0.070 0.316-0.16 0.827-0.236 1.342l-0.020 0.162c-0.128-0.416-0.192-0.864-0.256-1.28-0.032-0.096-0.096-0.224-0.16-0.224-0.384-0.032-0.736-0.032-1.12-0.032-0.096 0.544-0.16 1.056-0.256 1.536h-0.064c-0.064-0.512-0.16-0.992-0.224-1.504h-1.088l-0.192 1.536c-0.096-0.192-0.128-0.416-0.192-0.608-0.16-0.992-0.16-0.992-1.184-0.928 0 0-0.032 0-0.096 0.032-0.032 0.48-0.064 1.024-0.096 1.536h-0.064c-0.128-0.512-0.256-1.056-0.384-1.568h-0.8c0.16 1.248 0.32 2.496 0.48 3.712h9.536c0.16-1.248 0.32-2.464 0.48-3.712h-0.768c-0.16 0.544-0.288 1.056-0.416 1.568zM4.032 17.44v1.504h9.504v-1.504h-9.504zM26.528 5.344c0-0.192-0.064-0.352-0.032-0.512 0.16-1.568-0.768-2.656-2.72-2.656-3.296 0.032-6.624-0.096-9.952-0.128-2.656-0.032-5.312-0.064-7.968-0.032-1.472 0-2.272 0.864-2.272 2.336-0.015 0.415-0.024 0.902-0.024 1.392s0.009 0.977 0.026 1.462l-0.002-0.070c0 1.152 0.64 1.888 1.76 2.112 0.384 0.064 0.8 0.064 1.216 0.064 5.696-0.064 11.392-0.128 17.088-0.224 2.208-0.032 2.72-0.512 2.848-2.752 0-0.096 0.032-0.16 0.064-0.256 0.928-0.064 1.216 0.16 1.216 1.056 0.032 0.96 0.032 1.888 0 2.848 0 1.056-0.192 1.312-1.216 1.536-2.624 0.544-5.28 1.088-7.904 1.6-1.664 0.32-2.208 0.928-2.272 2.592 0 0.224-0.096 0.544-0.224 0.576-0.864 0.352-0.864 1.088-0.672 1.76 0.32 1.152 0.064 2.272-0.032 3.424-0.192 2.464-0.224 4.928-0.256 7.392 0 0.256 0.224 0.64 0.832 0.8 0.352 0.064 0.768 0.064 1.152 0.032 0.672-0.064 1.056-0.416 0.992-1.12 0-0.544-0.032-1.088-0.032-1.632-0.064-1.632-0.032-3.296-0.224-4.928-0.16-1.472-0.512-2.912-0.032-4.416 0.192-0.512-0.064-0.96-0.576-1.216-0.144-0.082-0.248-0.218-0.287-0.38l-0.001-0.004c-0.256-1.152 0.352-2.016 1.536-2.24 2.784-0.544 5.6-1.12 8.384-1.696 0.992-0.224 1.472-0.8 1.472-1.856 0.032-0.896 0.032-1.792 0.032-2.72-0.032-1.536-0.384-1.952-1.92-2.144z" fill="rgba(24,126,255,1)"></path>
            </g>
          </svg>
        </template>

        <template #contentCard>
          <van-overlay :show="expandList.ifDecorationMatterExpand">
            <div class="iconOut">
              <svg class="closeIcon" @click="expandList.ifDecorationMatterExpand = false" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" width="24" height="24" style="" filter="none">
                <g>
                <path d="M22.72 6.624c-2.080 2.080-4.128 4.192-6.208 6.304-0.288 0.288-0.736 0.288-0.992 0-2.080-2.112-4.16-4.224-6.24-6.304-0.256-0.288-0.704-0.288-0.992 0-0.48 0.512-0.992 1.024-1.504 1.536-0.119 0.136-0.192 0.316-0.192 0.512s0.073 0.376 0.193 0.513l-0.001-0.001 6.208 6.304c0.288 0.288 0.256 0.736 0 1.024l-6.24 6.336c-0.256 0.288-0.256 0.736 0 0.992l1.536 1.536c0.288 0.288 0.736 0.288 0.992 0l6.24-6.304c0.256-0.288 0.704-0.288 0.992 0 2.048 2.112 4.128 4.192 6.208 6.304 0.256 0.288 0.704 0.288 0.992 0 0.512-0.512 0.992-1.024 1.504-1.536 0.133-0.13 0.216-0.311 0.216-0.512s-0.083-0.382-0.216-0.512l-0-0c-2.016-2.080-4.096-4.16-6.208-6.304-0.119-0.136-0.192-0.316-0.192-0.512s0.073-0.376 0.193-0.513l-0.001 0.001 6.24-6.336c0.119-0.136 0.192-0.316 0.192-0.512s-0.073-0.376-0.193-0.513l0.001 0.001-1.536-1.536c-0.288-0.256-0.736-0.256-0.992 0.032z" fill="#fff"></path>
                </g>
              </svg>
            </div>

            <van-swipe lazy-render>
              <template #indicator="{ active, total }">
                <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
              </template>
              <van-swipe-item v-for="item in houseInfo.zhuangXiuShiXiangGuanLianList" :key="item.shiXiangId">
                <div class="decorationMatterOutCard">
                  <div class="imageOut">
                    <img class="image" :src="item.urls">
                  </div>
                  <div class="textArea">{{ item.comment }}</div>
                </div>
              </van-swipe-item>
            </van-swipe>
          </van-overlay>
        </template>
      </zInfoShowBtn>

      <!-- <zInfoShowBtn :ifExpand="expandList.ifPublicPoolInfoExpand" infoShowTitle="公摊信息" @changeExpandHandler="changeExpandHandler('ifPublicPoolInfoExpand')">
        <template #btnIcon>
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" width="34" height="34" style="" filter="none">
            <g>
            <path d="M512 0c282.766222 0 512 229.233778 512 512s-229.233778 512-512 512S0 794.766222 0 512 229.233778 0 512 0zM234.581333 602.737778L199.111111 726.101333c0 5.461333 0 10.922667 4.067556 13.624889 2.730667 5.404444 8.192 6.712889 13.653333 6.712889l262.115556 1.592889 0.028444-0.056889 93.070222-122.737778-337.464889-22.471111z m366.279111 28.16v0.028444l-95.089777 115.484445h301.425777a17.92 17.92 0 0 0 17.692445-17.578667l-0.398222-1.706667c-0.398222-1.365333-0.995556-2.844444-0.995556-3.697777h0.056889l-15.047111-54.215112-207.644445-38.314666z m170.837334-91.761778c-2.702222 5.404444-6.826667 8.135111-8.135111 13.482667-21.219556 27.932444-42.894222 55.495111-65.080889 82.688l104.448 9.671111zM658.887111 170.666667c-88.007111 0-156.558222 72.220444-156.558222 159.857777 0 67.043556 42.666667 143.132444 78.904889 194.645334 28.501333 40.021333 58.225778 73.528889 71.168 89.031111 1.308444 1.28 3.896889 3.84 6.513778 3.84 1.308444 0 5.12-1.308444 6.428444-3.868445a988.956444 988.956444 0 0 0 71.168-89.002666c36.209778-51.484444 78.961778-127.601778 78.961778-194.616889C816.725333 242.915556 745.557333 170.666667 658.887111 170.666667z m-179.939555 243.370666l-178.972445 5.831111a15.928889 15.928889 0 0 0-14.933333 12.145778l-40.533334 141.511111 347.306667 18.574223c-37.546667-44.657778-60.871111-74.24-69.916444-89.059556-13.937778-22.812444-34.759111-64.568889-42.951111-89.002667z m167.765333-96.824889l20.565333 7.196445c-15.587556 32.227556-31.573333 59.818667-47.985778 82.602667 26.396444-1.706667 52.679111-4.551111 78.819556-8.590223-6.200889-12.600889-12.600889-24.177778-19.228444-34.588444l18.801777-6.4c14.023111 21.390222 26.225778 44.401778 36.408889 68.807111l-19.626666 8.789333c-2.56-6.4-5.176889-12.600889-7.765334-18.631111a1394.545778 1394.545778 0 0 1-115.598222 11.861334l-3.612444-20.451556c13.425778-2.958222 33.194667-33.137778 59.221333-90.595556z m47.587555-67.384888c10.808889 36.010667 29.809778 65.422222 56.974223 88.206222l-14.961778 17.408c-28.643556-24.604444-48.64-56.405333-60.017778-95.573334z m-74.581333 1.621333l19.370667 7.964444c-13.994667 41.614222-32.597333 73.386667-55.580445 95.630223l-16.611555-14.392889c23.808-22.414222 41.415111-52.195556 52.792889-89.201778z" p-id="15664" fill="rgba(24,126,255,1)" stroke="none"></path>
            </g>
          </svg>
        </template>

        <template #contentCard>
          <van-cell-group inset class="cellGroupCard" v-if="expandList.ifPublicPoolInfoExpand">
            <zVanCell title="公摊比例" :content="houseInfo.gongTan.gongTanLv" />
          </van-cell-group>
        </template>
      </zInfoShowBtn> -->
    </div>
  </div>
</template>

<script setup>
import vantTable from 'vant-table'
import { postFangWuDetail } from '@/api/fangWuInfo/index.js'
import { getUserId } from '@/config/config.js'
import { pageConstant } from '@/config/contant.js'

const expandList = ref({
  ifHouseBasicExpand: false,
  ifMyApartmentTypeExpand: false,
  ifBuildingStructureExpand: false,
  ifIndoorEquipmentInfoExpand: false,
  ifDecorationMatterExpand: false,
  ifPublicPoolInfoExpand: false
})

const changeExpandHandler = (expandKey) => {
  if (expandList.value[expandKey]) {
    expandList.value[expandKey] = false
  } else {
    for (var keyItem in expandList.value) {
      expandList.value[keyItem] = false
    }

    expandList.value[expandKey] = true
  }
}

/**
 * 获取房屋信息数据
 */
const indoorEquipmentInfoColumns = ref([
  {
    prop: 'leiBieName',
    title: '类别',
    minWidth: '130px',
  },
  {
    prop: 'caiLiao',
    title: '材料',
    width: '100px',
  },
  {
    prop: 'pinPai',
    title: '品牌',
    width: '100px',
  },
])
const houseInfo = ref({})
const loadFangWuDetailDataHandler = () => {
  showLoadingToast({
    message: '加载中...',
    forbidClick: true,
    duration: 0
  });

  postFangWuDetail({userId: getUserId()}).then(res => {
    // 关闭加载中提示
    closeToast();

    if (res.data.code == pageConstant.okCode) {
      houseInfo.value = res.data.data
      if (houseInfo.value.huXingInfo.urls) {
        houseInfo.value.huXingInfo.urls = houseInfo.value.huXingInfo.urls.split(',')[0]
      }
      if (houseInfo.value.huXingInfo.zhuangXiuShiXiangGuanLianList) {
        houseInfo.value.huXingInfo.zhuangXiuShiXiangGuanLianList.forEach(item => {
          item.urls = item.urls.split(',')[0]
        })
      }
      if (houseInfo.value.huXingInfo.jianZhuMianJi) {
        houseInfo.value.huXingInfo.jianZhuMianJi = houseInfo.value.huXingInfo.jianZhuMianJi + '㎡'
      }
      if (houseInfo.value.jianZhuJieGou.chuFangChengZhong) {
        houseInfo.value.jianZhuJieGou.chuFangChengZhong = houseInfo.value.jianZhuJieGou.chuFangChengZhong + 'kN/㎡'
      }
      if (houseInfo.value.jianZhuJieGou.keTingChengZhong) {
        houseInfo.value.jianZhuJieGou.keTingChengZhong = houseInfo.value.jianZhuJieGou.keTingChengZhong + 'kN/㎡'
      }
      if (houseInfo.value.jianZhuJieGou.weiShengJianChengZhong) {
        houseInfo.value.jianZhuJieGou.weiShengJianChengZhong = houseInfo.value.jianZhuJieGou.weiShengJianChengZhong + 'kN/㎡'
      }
      if (houseInfo.value.jianZhuJieGou.woShiChengZhong) {
        houseInfo.value.jianZhuJieGou.woShiChengZhong = houseInfo.value.jianZhuJieGou.woShiChengZhong + 'kN/㎡'
      }
      if (houseInfo.value.huXingInfo.jianChengNianDai) {
        houseInfo.value.huXingInfo.jianChengNianDai = houseInfo.value.huXingInfo.jianChengNianDai + '年'
      }
    } else {
      showToast(res.data.msg);
    }
  })
  .catch((err) => {
    console.log(err)
  })
}
loadFangWuDetailDataHandler()
const imagePreviewHandler = (url) => {
  showImagePreview([url]);
}
</script>

<style lang="scss" scoped>
.out {
  background-color: rgb(241, 241, 241);
  min-height: 100dvh;

  .pageOut {
    padding: 18px;
    padding-top: 0;

    .apartmentTypeImageOut {
      width: 100%;
      display: flex;
      justify-content: center;
      position: relative;
      padding-top: 10px;

      .apartmentTypeImage {
        object-fit: contain;
        height: 217px;
        width: 182px;
      }

      .directionArea {
        position: absolute;
        top: 5px;
        left: 245px;

        .tipText {
          width: 24px;
          text-align: center;
          font-weight: bold;
          font-size: 12px;
        }

        .directionIcon {
          transform: rotate(0.375turn);
        }
      }
    }

    .cellGroupCard {
      background-color: #fff;
      margin: 0;
      margin-top: 10px;

      ::v-deep .van-cell {
        font-size: 16px;
      }
    }
    .tableOut {
      border-radius: 8px;
      overflow: hidden;
      color: #5a5a5a;
      // padding: 15px;
      // ::v-deep .vant-table-wrapper {
      //   border: 1px solid #d0d0d0;
      // }

      ::v-deep .vant-th {
        font-size: 14px;
      }
      ::v-deep .vant-td {
        font-size: 16px;
      }
      ::v-deep .vant-td:first-child {
        color: #344054;
      }
    }
    ::v-deep .van-swipe {
      height: 100%;
      width: 100%;
    }
    .custom-indicator {
      position: absolute;
      top: 30px;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 2px 5px;
      font-size: 16px;
      color: #fff;
      letter-spacing: 5px;
    }

    .iconOut {
      position: absolute;
      top: 60px;
      right: 18px;
      z-index: 100;
    }
    .decorationMatterOutCard {
      padding: 84px 18px 60px;
      height: 100%;
      box-sizing: border-box;

      .imageOut {
        padding: 20px 0 10px 0;

        .image {
          object-fit: contain;
          height: 370px;
          max-width: 100%;
        }
      }
      .textArea {
        background-color: #fff;
        padding: 10px 15px;
        border-radius: 5px;
        max-height: calc(100% - 24px - 403px);
        overflow: auto;
        line-height: 23px;
      }
    }
  }
}
</style>